<template>
  <div>
    <el-dialog
      :visible.sync="visible"
      :before-close="handleCancel"
      :show-close="true"
      :append-to-body="true"
      :close-on-click-modal="true"
      class="deal-dialog"
    >
      <p class="precise-top"><img :src="tipIcon">你所创建的客户已存在，但你没有权限查看</p>
      <div class="precise-data">
        <p class="precise-text">该客户的历史数据如下，你可通过创建该客户获取该客户查看及使用权限<span class="gray-text">（注：无法查看历史联系人及交易数据）</span></p>
        <div class="precise-table">
          <el-table
            :data="preciseData"
            style="width: 100%">
            <el-table-column
              prop="clientName"
              label="客户名称">
              <template slot-scope="scope">
                <ToolTip :content="scope.row.clientName" />
              </template>
            </el-table-column>
            <el-table-column prop="clientStatusStr" label="客户状态" />
            <el-table-column
              prop="address"
              label="合同">
              <template slot-scope="scope">
                <span>{{ scope.row.contractSignStatus ? '已签订' : '未签订' }}</span>
              </template>
            </el-table-column>
            <el-table-column
              label="订单">
              <template slot-scope="scope">
                <span>{{ scope.row.taxAmount ? '已下单' : '未下单' }}</span>
              </template>
            </el-table-column>
            <el-table-column label="销售">
              <template slot-scope="scope">
                <ToolTip :content="scope.row.sale" />
              </template>
            </el-table-column>
            <el-table-column label="跟进人">
              <template slot-scope="scope" >
                <ToolTip :content="scope.row.followName" />
              </template>
            </el-table-column>
            <el-table-column label="创建人">
              <template slot-scope="scope">
                <ToolTip :content="scope.row.createName" />
              </template>
            </el-table-column>
            <el-table-column label="创建时间" min-width="140">
              <template slot-scope="scope">
                <span>{{ scope.row.createTime | standardFormat('YYYY/MM/DD HH:mm') }}</span>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button size="small" type="primary" @click="handleCreate">继续创建客户</el-button>
        <el-button type="info" class="cancel-btn-style" size="small" @click="handleCancel">返回</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import tipIcon from '@/assets/customer/tip_icon.png';
import { standardFormat } from '@/filters/date';

export default {
  filters: { standardFormat },
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    preciseData: {
      type: Array,
      default() {
        return [];
      }
    }
  },
  data() {
    return {
      tipIcon
    };
  },
  methods: {
    handleCreate() {
      this.$emit('continueCreate');
      this.$emit('closePreciseData');
    },
    handleCancel() {
      this.$emit('closePreciseData');
    }
  }
};
</script>

<style lang="scss" scoped>
.deal-dialog{
  border-radius: 10px;
  ::v-deep {
    .el-dialog{
      border-radius: 10px;
    }
    .el-dialog__header{
      padding: 0;
    }
    .el-dialog__body{
      // padding: 16px 24px 0;
      padding: 0;
    }
    .dialog-footer{
      display: flex;
      justify-content: center;
    }
    .el-form-item{
      margin-bottom: 14px;
      .width240{
        width: 240px;
      }
      .el-form-item__error{
        padding: 0;
      }
    }
    .tip{
      color: #999;
      padding: 0 10px;
    }
  }
  .precise-top {
    display: flex;
    align-items: center;
    padding: 12px 24px;
    background: #fff2eb;
    border-radius: 8px 8px 0px 0px;
    font-size: 16px;
    font-weight: bold;
    color: #333;
    img {
      width: 24px;
      height: 24px;
      margin-right: 12px;
    }
  }
  .precise-data {
    margin: 0 24px 40px;
    padding: 12px 8px;
    background: #fafafc;
    border: 1px solid #ebeefd;
    border-radius: 8px;
    .precise-text {
      margin: 0;
      font-size: 12px;
      color: #666;
      .gray-text {
        color: #999;
      }
    }
    .precise-table {
      padding: 8px;
      background: #ffffff;
      border-radius: 8px;
    }
  }
}
</style>
